<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Drag Points</title>
        <link rel="stylesheet" href="css/reset.css" type="text/css"/>
        <link rel="stylesheet" href="css/drag_points.css" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="../dist/PerspectiveTransform.min.js"></script>
    </head>
    <body>
        <div id="info-container">
            Drag the fucking points to transform the image.
        </div>
        <div id="container">
            <div class="img"></div>
            <div class="pt tl"></div>
            <div class="pt tr"></div>
            <div class="pt bl"></div>
            <div class="pt br"></div>
        </div>
        <script>
            var container = $("#container");
            var img = $(".img");
            var pts = $(".pt");
            var IMG_WIDTH = 512;
            var IMG_HEIGHT = 512;
            
    
            var transform = new PerspectiveTransform(img[0], IMG_WIDTH, IMG_HEIGHT, true);
            var tl = pts.filter(".tl").css({
                left : transform.topLeft.x,
                top : transform.topLeft.y
            });
            var tr = pts.filter(".tr").css({
                left : transform.topRight.x,
                top : transform.topRight.y
            });
            var bl = pts.filter(".bl").css({
                left : transform.bottomLeft.x,
                top : transform.bottomLeft.y
            });
            var br = pts.filter(".br").css({
                left : transform.bottomRight.x,
                top : transform.bottomRight.y
            });
            var target;
            var targetPoint;

            function onMouseMove(e) {
                targetPoint.x = e.pageX - container.offset().left - 20;
                targetPoint.y = e.pageY - container.offset().top - 20;
                target.css({
                    left : targetPoint.x,
                    top : targetPoint.y
                });
                
                // check the polygon error, if it's 0, which mean there is no error
                if(transform.checkError()==0){
                    transform.update();
                    img.show();
                }else{
                    img.hide();
                }
            }
            
            pts.mousedown(function(e) {
                target = $(this);
                targetPoint = target.hasClass("tl") ? transform.topLeft : target.hasClass("tr") ? transform.topRight : target.hasClass("bl") ? transform.bottomLeft : transform.bottomRight;
                onMouseMove.apply(this, Array.prototype.slice.call(arguments));
                $(window).mousemove(onMouseMove);
                $(window).mouseup(function() {
                    $(window).unbind('mousemove', onMouseMove);
                })
            });
        </script>
    </body>
</html>
